<template>
    <div class="xx1">

        <div class="block">
            <el-carousel height="380px">
                <el-carousel-item :key="index" v-for="(item,index) in imgwrap">
                    <img :src="item.url" style="height: 380px;width: 380px">
                </el-carousel-item>
            </el-carousel>
        </div>

        <div class="xx1_middle">

                <el-tabs  v-model="activeName">
                    <el-tab-pane label="新闻动态" name="first">
                        <ul class="dynews">
                            <li v-for="x in xwList">
                                <span><a href="#">{{x.nr}}</a></span>
                                <span>{{x.sj}}</span>
                            </li>
                        </ul>
                    </el-tab-pane>
                    <el-tab-pane label="行业资讯" name="second">配置管理</el-tab-pane>
                </el-tabs>

        </div>


        <div class="xx1_right">
            <my-login></my-login>
        </div>


    </div>
</template>

<script>
    import MyLogin from "./myLogin";
    export default {
        name: "bottom_xx1",
        components: {MyLogin},
        data() {
            return {
                xwList: [{
                    nr: '构接共适电干际区全门回多物确却厂',
                    sj: '2018-09-14'
                }, {
                    nr: '目识压年间图影这被白且周向选重重决叫求。',
                    sj: '2018-09-14'
                }, {
                    nr: '分我青王米许适代北法光她习矿究对统好律更。',
                    sj: '2018-09-14'
                }, {
                    nr: '资记行思放系文石七又质第感时当建月题。',
                    sj: '2018-09-14'
                }, {
                    nr: '条程口行响情连别率律用果者具入。',
                    sj: '2018-09-14'
                }, {
                    nr: '包叫改九派增识消学中着见场精共张边即北明。',
                    sj: '2018-09-14'
                }],
                // logo所需
                userName: '',
                password: '',
                msg: (Math.round(Math.random() * (9999 - 1000)) + 1000),
                msg2: '',
                ruleForm: {
                    userName: '',
                    password: ''
                },
                rules: {
                    userName: [{
                        required: true,
                        message: '用户名不能为空',
                        trigger: 'blur'
                    },
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'},
                    ],
                    password: [{
                        required: true,
                        message: '密码不能为空',
                        trigger: 'blur'
                    },

                    ]
                },

                activeName: 'first',
                imgwrap: [
                    {url: require("../../assets/images/slide1.jpg")},
                    {url: require("../../assets/images/slide2.jpg")},
                    {url: require("../../assets/images/slide3.jpg")},
                ],
            }
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            }
        }
    }
</script>

<style lang="less" scoped>
    .xx1 {
        width: 100%;
        height: 380px;
        display: flex;
        justify-content: space-between;

        .block {
            height: 380px;
            width: 380px;
        }

        .xx1_middle {
            width: 400px;
            height: 380px;
        }

        .xx1_right {
            width: 350px;
            height: 380px;
            overflow: hidden;

        }
    }



    /*新闻动态*/
    .dynews {
        width: 100%;

    }

    .dynews:after {
        content: '';
        display: block;
        clear: both;
    }

    .dynews li {

        line-height: 50px;
        height: 50px;
        background-image: url(../../assets/images/BluelistStyle.jpg);
        background-repeat: no-repeat;
        background-position: 0 center;
        padding-left: 10px;

        span:first-child {
            float: left;

        }
        a{
            display: block;
            overflow:hidden; /*溢出的部分隐藏*/
            white-space: nowrap; /*文本不换行*/
            text-overflow:ellipsis;/*ellipsis:文本溢出显示省略号（...）；clip：不显示省略标记（...），而是简单的裁切*/
            width:250px;
        }

        span:last-child {
            float: right;
            margin-right: 10px;

        }

    }


    /*选项卡样式*/
    ::v-deep .el-tabs__nav-wrap::after {
        background: none;
    }

    ::v-deep .el-tabs__item.is-top.is-active {
        background-color: #409EFF;
        color: #fff;
    }

    ::v-deep .el-tabs__item.is-top {
        background-color: #CCCCCC;
        margin-right: 13px;
        width: 135px;

    }
    .el-form-item__error {
        margin-left: 100px;

    }













</style>